<template>
	<template v-if="isAlready">
		<div :id="module.id" class="dragModuleClass"
			 :style="'width:'+module.props.width+module.props.widthUnit+';height:'+module.props.height+module.props.heightUnit+';'">
			<div v-if="module.props.visible" style="width: 100%;float: left;">
				<ex-module :model="model" :modules="modules" :module="module" drag></ex-module>
			</div>
			<div class="dragModuleHeader">
				<div class="dragModuleHeaderTitle">
					模块名称：{{ module.name }}
				</div>
				<div class="dragModuleHeaderButton">
					<div style="float:left;margin-right: 5px;">

					</div>
					<el-icon @click='dblClick' style="margin-right: 5px;">
						<component is="el-icon-setting"></component>
					</el-icon>
					<el-icon @click='copyModule' style="margin-right: 5px;">
						<component is="el-icon-copy-document"></component>
					</el-icon>
					<el-icon @click='removeModule'>
						<component is="el-icon-close"></component>
					</el-icon>
				</div>
			</div>
			<div class="innerDrawer">
				<el-drawer v-model="module.drawerModel" size="130px;" direction="btt" :withHeader="false"
						   style="position: absolute;z-index: -1;">
					<el-form label-width="100" label-position="right" style="padding: 10px 10px 0 10px;" size="small">
						<el-row>
							<el-col :span="6" class="colClass">
								<el-form-item label="模块名称">
									<el-input v-model="module.name" clearable style="width: 150px;"></el-input>
									<el-switch
										v-model="module.props.showName"
										style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
										:active-value="true"
										:inactive-value="false">
									</el-switch>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="宽度">
									<el-input-number v-model="module.props.width" controls-position="right"
													 placeholder="可调整宽度"/>
									<el-select v-model="module.props.widthUnit" style="width: 75px;">
										<el-option label="百分比" value="%"/>
										<el-option label="像素" value="px"/>
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="高度">
									<el-input-number v-model="module.props.height" controls-position="right"
													 :readonly="heightReadonly" placeholder="可调整高度"/>
									<el-select v-model="module.props.heightUnit" style="width: 75px;"
											   @change="heightUnitChange">
										<el-option label="自动" value="auto"/>
										<el-option label="百分比" value="%"/>
										<el-option label="像素" value="px"/>
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="显示边框">
									<el-switch
										v-model="module.props.border"
										style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
										:active-value="1"
										:inactive-value="0">
									</el-switch>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="阴影效果">
									<el-select v-model="module.props.shadow" style="width: 100px;">
										<el-option label="显示" value="always"/>
										<el-option label="移入显示" value="hover"/>
										<el-option label="不显示" value="never"/>
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="6" class="colClass">
								<el-form-item label="可关闭">
									<el-switch
										v-model="module.props.closeable"
										style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
										:active-value="true"
										:inactive-value="false">
									</el-switch>
								</el-form-item>
							</el-col>

							<!--            <el-col :span="6" class="colClass">-->
							<!--              <el-form-item label="占用列">-->
							<!--                <el-input-number v-model="module.props.colSpan" :min="0"-->
							<!--                                 :max="24"></el-input-number>-->
							<!--              </el-form-item>-->
							<!--            </el-col>-->

							<!--            <el-col :span="6" class="colClass">-->
							<!--              <el-form-item label="控件尺寸">-->
							<!--                <el-select v-model="module.props.widgetSize" placeholder="请选择"-->
							<!--                           filterable-->
							<!--                           clearable>-->
							<!--                  <el-option-->
							<!--                      v-for="item in this.$cache.dic.options('WIDGET_SIZE')"-->
							<!--                      :key="item.value" :label="item.label"-->
							<!--                      :value="item.value"/>-->
							<!--                </el-select>-->
							<!--              </el-form-item>-->
							<!--            </el-col>-->

							<!--            <el-col :span="6">-->
							<!--              <el-form-item label="标签宽度">-->
							<!--                <el-input-number v-model="module.props.labelWidth"></el-input-number>-->
							<!--              </el-form-item>-->
							<!--            </el-col>-->
						</el-row>
					</el-form>
				</el-drawer>
			</div>
		</div>
	</template>
</template>
<script>

import ExModule from "@/views/asset/card/module/module.vue";

export default {
	name: "moduleDrag",
	components: {ExModule},
	props: {
		model: {type: Object, default: {}},
		modules: {type: Array, default: []},
		module: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
			heightReadonly: true,
			innerWidth: null,
			innerHeight: null,
		}
	},
	created() {
		if (!this.module.props.width) {
			this.module.props.width = 100;
		}
		if (!this.module.props.widthUnit) {
			this.module.props.widthUnit = '%';
		}
		if (!this.module.props.heightUnit) {
			this.module.props.heightUnit = 'auto';
		}
		if (!this.module.props.shadow) {
			this.module.props.shadow = 'never';
		}
		if (this.module.props.border !== 0 && this.module.props.border !== 1) {
			this.module.props.border = 0;
		}

		this.module.props.visible = true;
		this.heightUnitChange();
		this.isAlready = true;
	},
	beforeMount() {
		// this.addResizeEvent(this.module.id);
	},
	beforeUnmount() {
		// this.removeResizeEvent(this.module.id);
	},
	mounted() {
		let win = document.getElementById(this.module.id);
		// this.addResizeEvent(this.module.id);
	},
	methods: {
		//点击其中一个字段时，将当前选中字段替换成点击的字段
		dblClick: function () {
			this.module.props.visible = true;
			this.module.drawerModel = true;
		},
		removeModule() {
			let filters = this.modules.filter(item => item.id !== this.module.id);
			this.modules.splice(0, this.modules.length);
			filters.forEach(item => {
				this.modules.push(item);
			});
		},
		copyModule() {
			let newModule = this.$TOOL.objCopy(this.module);
			newModule.id = this.$TOOL.uuid();
			this.modules.push(newModule);
		},

		addResizeEvent(id) {
			let win = document.getElementById(id);
			this.resetDragAreaHeight();
			win.addEventListener("resize", this.resetDragAreaHeight);
		},
		removeResizeEvent(id) {
			let win = document.getElementById(id);
			win.removeEventListener("resize", this.resetDragAreaHeight);
		},
		resetDragAreaHeight() {
			let win = document.getElementById(this.module.id);
			if (win) {
				this.innerHeight = win.scrollHeight;
				this.innerWidth = win.offsetWidth;
				this.dragAreaHeight = win.offsetHeight;
			}
		},
		heightUnitChange: function () {
			if (this.module.props.heightUnit === 'auto') {
				this.module.props.height = null;
				this.heightReadonly = true;
			} else {
				this.heightReadonly = false;
			}
		},
	}
}
</script>

<style>

.dragModuleClass {
	cursor: move;
	float: left;
	background: #fff;
	width: 100%;
	min-height: 50px;
//line-height: 50px; text-align: center; horiz-align: center; border: 1px dashed #e6e6e6;
}

.dragModuleClass:hover {
	border-color: blue;
}

.dragModuleHeader {
	float: left;
	width: 100%;
	display: none;
	margin-top: -18px;
}

.dragModuleHeaderTitle {
	float: left;
	font-size: 12px;
	color: rgba(0, 0, 255, 0.5);
}

.dragModuleHeaderButton {
	float: right;
	border: 1px dashed #e6e6e6;
}

.dragModuleClass:hover .dragModuleHeader {
	display: block;
}

.dragModuleClass:hover .dragModuleHeaderButton {
	border-color: blue;
	cursor: pointer;
}

.dragModuleDragAreaClass {
	min-height: 400px;
	background: #6eb0e10D;
}

</style>
<script setup>
</script>
